import React, { Component } from 'react';
import { connect } from 'react-redux'  
import { Select, Radio,Form ,Input} from 'antd';
import RackInfoModal from '../../components/topology/RackInfoModal';
import TopologymapModal from '../../components/topology/topologymapModal';
import { Z_FIXED } from 'zlib';
var _this;

const Option = Select.Option;
const FormItem = Form.Item;

class Topology extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {       
        var dispatch = this.props.dispatch;
        $("#topology tr td").on('click',function(e){
            var key = $(this).attr('key');
            if(key){
                dispatch({
                    type: 'topology/showInfo',
                    payload: {id:key,type:_this.props.topology.type},
                })
            }
        });
    }

    render() {
        _this = this;       
        const { children,modalVisible,roomList,newKey,rackList,roomId,rackDetailList,modalType,type,roomU} = this.props.topology; 
        const { getFieldDecorator,getFieldsValue } = this.props.form;
        var dispatch = this.props.dispatch;       
        if($('#topology').width()==undefined||$('#topology').width()=='undefined'){
            var w = ($('#topology').width()-10 ) / 25;
            $("#topology tr td").css('width',w +'px');
            $("#topology tr td").css('height',w +'px');
        }        

        for(var i=0;i<rackList.length;i++){
           var curr = rackList[i];            
           var occupancy = curr.occupancy;          
           var color ="#fe6b9f";
           var aa =Number(occupancy.replace("%",""));           
           if(0<aa&&aa<=25){
              color ="#fe6b9f";
           }else if(25 <aa&&aa<=50){
              color ="#ffc758";
           }else if(50 <aa&&aa<=75){
              color ="#94f1c0";
           }else if(75<aa&&aa<=100){
              color ="#76c99d";            
           }     
           var rowNum = curr.rowNum-1;
           var colNum = curr.colNum-1;     
           $("#topology tr:eq("+rowNum+") td:eq("+colNum+")").css("background-color",color);      
           $("#topology tr:eq("+rowNum+") td:eq("+colNum+")").text(curr.assetName);
           $("#topology tr:eq("+rowNum+") td:eq("+colNum+")").attr('key',curr.assetId_);
        }    

        const modalProps = {          
            visible: modalVisible,
            maskClosable: false,
            itemList:rackDetailList,
            title: `机柜信息`,
            wrapClassName: 'vertical-center-modal', 
            onCancel () {
                dispatch({
                  type: 'topology/hideInfo',
                })
            },       
        }
        const loopRoom = data => data.map((item) => {
            return <Option key={item.id_ + ''}>{item.name}</Option>
        });

        //切换机房 
        const handleRoomChange = (id) => {              
            dispatch({
                type: 'topology/searchRackList',
                payload: {roomId:id,type:type},
            })
             dispatch({
                type: 'topology/getRoomU',
                payload:  {roomId:id},
            })         
            $("#topology tr td").css("background-color","rgb(255,255,255)");
            $("#topology tr td").text("");
            $("#topology tr td").removeAttr("key") ;           
        };   

        //切换组
        const handleTypeChange = (event) => {
            dispatch({
                type: 'topology/typeChange',
                payload: {roomId:roomId,type:event.target.value},
            })
        };  

        //机房U位已使用情况
        let roomUProps={
            uData: roomU,
        }

        return (
            <div style={{width:'auto',height:document.body.clientHeight - 80,position:'relative',backgroundColor:'#fff',padding:'10px'}}>
                <div style={{paddingLeft:'2px'}}>   
                    <Form layout={'inline'}>  
                              <Select
                                  showSearch
                                  value={roomId+''}
                                  style={{ width:200 }}
                                  onChange={handleRoomChange}
                                  placeholder="请选择要查看的机房"
                                  optionFilterProp="children"  
                              >
                                {loopRoom(roomList)}
                              </Select>           
                        <Radio.Group value={type} onChange={handleTypeChange} style={{paddingLeft:'10px'}}>
                            <Radio.Button value="1">按机柜显示</Radio.Button>
                            <Radio.Button value="2">按组显示</Radio.Button>
                        </Radio.Group>
                    </Form>
                </div> 
                <div style={{position:'absolute',top:'50px',left:0,right:0,bottom:0,overflow:'auto',padding:'0 10px 10px'}}>
                <div style={{minWidth:'1200px',minHeight:'800px',textAlign:'center'}}>
                <div style={{width:'80%',display:'block',float:"left"}}>
                    <table id="topology" className="topology">
                    <tbody>
                        <tr>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td>
                        </tr>
                        <tr>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td>
                        </tr>
                        <tr>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td>
                        </tr>
                        <tr>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td>
                        </tr>
                        <tr>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td>
                        </tr>
                        <tr>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td>
                        </tr>
                        <tr>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td>
                        </tr>
                        <tr>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td>
                        </tr>
                        <tr>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td>
                        </tr>
                        <tr>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td>
                        </tr>
                        <tr>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td>
                        </tr>
                        <tr>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td>
                        </tr>
                        <tr>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td>
                        </tr>
                        <tr>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td>
                        </tr>
                        <tr>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td>
                        </tr> 
                        <tr>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td>
                        </tr> 
                        <tr>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                            <td></td><td></td><td></td><td></td><td></td>
                        </tr>       
                    </tbody>              
                    </table>
                </div>
                <div style={{width:'20%',display:'block',float:"left",textAlign:"left",paddingLeft:"20px",paddingTop: 8}}>
                    {/*<div style={{fontSize: 16,lineHeight:"20px",marginBottom:8,color:"#333"}}>
                        机房剩余:
                    </div>*/}
                    <div style={{marginBottom:100,}}>
                        <div style={{display:'block',fontSize:16,lineHeight:"20px",color:"#555",marginBottom:12,}}>
                            机房剩余容量
                        </div>
                        <div style={{display:'block',marginBottom: 8,fontSize:13,lineHeight:"20px",color:"#777"}}>
                            <div style={{width:26,height:20,float:"left",background:"#76c99d",marginRight:8,}}></div>
                            75%-100%
                        </div>
                        <div style={{display:'block',marginBottom: 8,fontSize:13,lineHeight:"20px",color:"#777"}}>
                            <div style={{width:26,height:20,float:"left",background:"#94f1c0",marginRight:8,}}></div>
                            50%-75%
                        </div>
                        <div style={{display:'block',marginBottom: 8,fontSize:13,lineHeight:"20px",color:"#777"}}>
                            <div style={{width:26,height:20,float:"left",background:"#ffc758",marginRight:8,}}></div>
                            25%-75%
                        </div>
                        <div style={{display:'block',marginBottom: 8,fontSize:13,lineHeight:"20px",color:"#777"}}>
                            <div style={{width:26,height:20,float:"left",background:"#fe6b9f",marginRight:8,}}></div>
                             0%-25%
                        </div>
                    </div>
                    <div style={{position:'relative'}}>
                        <div style={{display:'block',fontSize:16,lineHeight:"20px",color:"#555"}}>
                            机房U位使用情况
                        </div>
                        <TopologymapModal {...roomUProps}/>
                    </div>
                </div>
                <div style={{width:'100%',display:'block',clear:"both"}}>
                </div>
                </div>
                </div>
                <RackInfoModal {...modalProps} />
            </div>
        );
    }

}

function mapStateToProps(state) {
    return { topology : state.topology,loading:state.loading.models.topology};
}
Topology = Form.create()(Topology);

export default connect(mapStateToProps)(Topology);